<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Styling the body */
      * {
        margin: 0px;
        padding: 0px;
      }

      /* Styling the first parallax's
		height, width and background color */
      .parallax-1 {
        width: 100%;
        height: 600px;
        background: url("bg.jfif");
        background-size: 100% 100%;
        background-attachment: fixed;
      }

      /* Styling the title of first parallax */
      .parallax-1 h2 {
        margin: auto;
        position: relative;
        left: 500x;
        top: 300px;
        width: 250px;
        height: 32px;
        padding: 10px;
        background-color: black;
        color: white;
        text-align: center;
      }

      /* Styling the second parallax's
		height, width and background color */
      .parallax-2 {
        width: 100%;
        height: 600px;
        background: url("bg.jfif");
        background-size: 100% 100%;
        background-attachment: fixed;
      }

      /* Styling the title of second parallax */
      .parallax-2 h2 {
        margin: auto;
        position: relative;
        left: 500x;
        top: 300px;
        width: 250px;
        height: 37px;
        padding: 10px;
        background-color: white;
        color: black;
        text-align: center;
        font-size: 30px;
        font-family: Verdana;
      }

      /* Styling the content or paragraph */
      .para-1 {
        padding: 50px;
        background-color: black;
        color: white;
        font-size: 17px;
      }

      /* Styling the content or paragraph */
      .para-2 {
        text-align: center;
        padding: 25px;
        font-size: 17px;
        font-family: Verdana;
        background-color: black;
        color: white;
      }
    </style>
  </head>

  <body>
    <!-- Giving title of the first parallax -->
    <div class="parallax-1">
      <h2>Parralax Demo</h2>
    </div>

    <!--Content of first parallax -->
    <div class="para-1">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis omnis
        odit porro in, itaque expedita aperiam necessitatibus hic facilis.
        Laboriosam tempore molestias incidunt, nobis asperiores blanditiis
        aliquid, fugiat fugit nostrum, veniam voluptate! Debitis cumque esse
        reprehenderit? Ut exercitationem sequi velit quidem corporis, mollitia,
        ea ipsam recusandae nisi natus maiores qui?.<br />
        <br />Languages known : C Language, C++, JAVA, Python, JavaScript,
        MySQL.<br />
        IT Constructs : Data Structures and Algorithm, OOP, HTML, CSS, LINUX,
        and Git & GitHub.
      </p>
    </div>

    <!-- Giving title of the first parallax -->
    <div class="parallax-2">
      <h2>PROJECTS</h2>
    </div>

    <!--Content of first parallax -->
    <div class="para-2">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quas
        laboriosam beatae consequuntur cumque iure! Quidem veritatis sapiente
        consectetur odit quaerat cumque ipsa atque aspernatur sunt nulla
        aliquid, fuga iusto non rem delectus, cupiditate quos, quas possimus.
        Aspernatur, asperiores perspiciatis?
      </p>
    </div>

    <!--This will be same as first parallax-->
    <div class="parallax-1">
      <h2>ACHIEVEMENTS</h2>
    </div>

    <div class="para-2">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi ipsa
        cum ad fugiat ut at perferendis quos officiis impedit dolores.
      </p>
    </div>
  </body>
</html>
